<template>
  <div>
    <h1>公告详情</h1>
    <h2>{{ announcement.title }}</h2>
    <p>发布企业：{{ announcement.company }}</p>
    <p>发布时间：{{ announcement.publishDate }}</p>
    <p>公告内容：{{ announcement.content }}</p>
    <div v-if="announcement.attachment">
      <p>附件：<a :href="`/attachments/${announcement.attachment}`" download>{{ announcement.attachment }}</a></p>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import Mock from 'mockjs';

export default {
  setup() {
    const route = useRoute();
    const announcement = ref({});

    onMounted(() => {
      const id = route.params.id;
      fetchAnnouncement(id);
    });

    const fetchAnnouncement = (id) => {
      // 使用 Mock.js 模拟接口数据
      const data = Mock.mock({
        'announcement': {
          'id|+1': id,
          title: '@title(5, 10)',
          company: '@company',
          publishDate: '@date("yyyy-MM-dd")',
          content: '@cparagraph(3)',
          attachment: '@pick(["附件1.pdf", "附件2.docx", "附件3.xlsx"])'
        }
      });
      announcement.value = data.announcement;
    };

    return {
      announcement
    };
  }
};
</script>

<style scoped>
/* 添加一些样式以匹配设计图 */
</style>